import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
    Table,
    Form,
    Card,
    Button,
    message,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './StructureMaintenance.less';

@connect(({ system }) => ({
    system,
}))
@Form.create()
export default class MessageNotification extends PureComponent {

    state = {
        modalVisible: false,
        messageSelectedRowKeys: [],
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'system/findByCustomerId',
            payload: {
                page: 1,
                size: 10,
            }
        });
    }

    handleStandardTableChange = (e) => {
        // console.log("handleStandardTableChange", e)
        this.props.dispatch({
            type: 'system/findByCustomerId',
            payload: { page: e.current, size: e.pageSize },
        });
    }

    columns = [{
        title: '消息种类',
        dataIndex: 'type',
        
    }, {
        title: '消息内容',
        dataIndex: 'remark',
    }, {
        title: '操作',
        dataIndex: 'address',
        render: (text, record) => (
            <Fragment>
                <a onClick={() => this.handleDelateMessage(record.id)}>删除</a>
            </Fragment>
        ),
    }];

    handleDelateMessage = (id) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'system/deleteMessageById',
            payload: {
                id: id
            },
            callback: () => {
                const { system: { userNameResult } } = this.props;
                if (userNameResult.code == 200) {
                    message.success("删除成功")
                    dispatch({
                        type: 'system/findByCustomerId',
                        payload: {
                            page: 1,
                            size: 10,
                        }
                    });
                } else {
                    message.error(userNameResult.message)
                }
            }
        });
    }

    handleAllDeleteMessage = () => {
        const { dispatch } = this.props;
        if (this.state.messageSelectedRowKeys.length > 0) {
            dispatch({
                type: 'system/deleteMessageByIds',
                payload: {
                    ids: this.state.messageSelectedRowKeys
                },
                callback: () => {
                    const { system: { userNameResult } } = this.props;
                    if (userNameResult.code == 200) {
                        message.success("批量删除成功")
                        dispatch({
                            type: 'system/findByCustomerId',
                            payload: {
                                page: 1,
                                size: 10,
                            }
                        });
                    } else {
                        message.error(userNameResult.message)
                    }
                }
            });
        } else {
            message.warning("您未选择任何消息")
        }
    }

    rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            this.setState({
                messageSelectedRowKeys: selectedRowKeys
            })
        },
        onSelect: (record, selected, selectedRows) => {
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
        },
    };

    render() {
        const { system: { messageNotificationList, systemLoading, messagePage } } = this.props;

        return (
            <PageHeaderLayout title="通知列表">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                       
                        <div className={styles.tableListOperator}>
                            <Button icon="delete" type='primary' onClick={() => this.handleAllDeleteMessage()}
                            >批量删除
                            </Button>
                        </div>
                        <Table
                            columns={this.columns}
                            dataSource={messageNotificationList}
                            rowKey="id"
                            rowSelection={this.rowSelection}
                            loading={systemLoading}
                            pagination={messagePage}
                            onChange={this.handleStandardTableChange}
                        >
                        </Table>
                    </div>
                </Card>

            </PageHeaderLayout>
        );
    }

}
